<template>
  <!--转盘-->
  <div>
  <div class="rotary_box">
    <div class="rotary_fuzhu"></div>
  </div>
  <div class="rotary_wrap">
    <a href="javascript:" class="looper_close" title="Close this thing"></a>
    <div class="rotaryArrow" title="Began to draw" id="rotaryArrow"></div>
    <div class="result">
      <li class="top_rotary">
        <a href="javascript:" id="resultBtn" title="close"><img :src="getImgUrl('chacha.png')" ></a>
      </li>
      <div class="form">
        <form id="form" name="form" action="" target="actionframe" enctype="multipart/form-data" method="post">
          <p class="rotary_title">留下您的联系方式即可上门领奖！</p>
          <div class="input">
            <span class="prize" style="color: white">奖品：</span>
            <input class="inp" type="text" style="cursor:not-allowed" readonly id="resultTxt">
            <input type="hidden" name="jp" id="resultTxt1">
          </div>


          <div class="lettory" style="margin-top: 30px;height: 30px">



          </div>
          <el-button type="primary" @click="lettory" style="margin-top: 80px;margin-left: 160px">立即领取</el-button>
          <div class="input" style="display: block">
            <input id="giftnum" class="button" type="hidden">
          </div>
        </form>
        <iframe name="actionframe" type="hidden" style="display: none;" width="0" height="0"></iframe>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
    import api from "../../../../axios/api";

    export default {
        name: "rotary",
      methods:{
        getImgUrl: function (imgsrc) {
          return "../../../static/images/rotary/" + imgsrc;
        },
        lettory: function () {
          var giftnum = $('#giftnum').val();

          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/api/userController/lettory/190001/"+giftnum , null, "post")
            .then(dto => {
              console.log(dto);
              this.$message.success("提交成功")
              this.user = dto.t;


            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

        },
      }
    }
</script>

<style scoped>

</style>
